<template>
	<view>
		<!-- 搜索 -->
		<view style="background: #fff; padding: 56rpx 0 34rpx 0; border-bottom: 4rpx solid #f4f5f9">
			<view class="flex align-center" style="margin: 0 32rpx 0 32rpx; background: #f3f3f3; border-radius: 8rpx; padding: 14rpx 24rpx">
				<view style="font-size: 0; margin-right: 14rpx">
					<image style="width: 40rpx; height: 40rpx" src="./static/10.png"></image>
				</view>
				<input @input="search" class="flex-1" type="text" v-model="keyWords" placeholder-style="font-size: 24rpx" placeholder="姓名/电话/昵称搜索" />
				<view
					v-if="keyWords"
					@click="(keyWords = ''), (userList = [])"
					class="flex align-center justify-center"
					style="font-size: 0; width: 40rpx; height: 40rpx; margin-left: 30rpx"
				>
					<image style="width: 28rpx; height: 28rpx" src="./static/21.png"></image>
				</view>
			</view>
		</view>
		<view class="flex" v-for="(item, index) in userList" @click="clickList(item)" :key="index" style="padding: 20rpx 34rpx; border-bottom: 2rpx solid #f4f5f9">
			<view style="font-size: 0; margin-right: 20rpx">
				<image style="width: 84rpx; height: 84rpx; border-radius: 50%" :src="item.avatar"></image>
			</view>
			<view class="flex flex-clum justify-between" style="height: 84rpx">
				<view style="font-size: 30rpx; font-weight: 700; color: #333">{{ item.nickname }}{{ item.true_name ? `（${item.true_name}）` : '' }}</view>
				<view style="font-size: 26rpx; color: #999">
					{{ item.mobile }}
				</view>
			</view>
		</view>
		<view style="height: 48rpx"></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			keyWords: '',
			userList: [],
			shopId: 0,
			page: 1,
			lastPage: 0
		};
	},
	onLoad(options) {
		this.shopId = options.shopId;
	},
	onReachBottom() {
		this.page++;
		if (this.page > this.lastPage) return this.$wanlshop.msg('我是有底线的');
		this.getShopList();
	},
	methods: {
		clickList(item) {
			item.keyWords = this.keyWords;
			item.shopId = this.shopId;
			if (item.is_join) {
				return uni.showToast({
					title: '此人已是本店铺的店铺会员，不能重复添加！',
					icon: 'none'
				});
			}
			uni.navigateTo({
				url: '/pages/schedule/addRebate3?obj=' + encodeURIComponent(JSON.stringify(item))
			});
		},
		search() {
			this.getShopList();
		},
		//获取列表
		getShopList() {
			if (this.keyWords == '') {
				return;
			}
			this.$request({
				url: 'wokers/user_list',
				method: 'POST',
				data: {
					keyword: this.keyWords,
					shop_id: this.shopId,
					page: this.page
				}
			}).then((res) => {
				const { code, data, msg } = res.data;
				if (code == 1) {
					if (this.page == 1) {
						this.userList = data;
					} else {
						this.userList.push(...data);
					}
					this.lastPage = data.last_page;
				} else {
					uni.showToast({
						title: msg,
						icon: 'error'
					});
				}
			});
		}
	}
};
</script>

<style scoped lang="scss">
.flex {
	display: flex;
}
.flex-1 {
	flex: 1;
}
.flex-clum {
	flex-direction: column;
}
.align-center {
	align-items: center;
}
.align-end {
	align-items: flex-end;
}
.justify-center {
	justify-content: center;
}
.justify-between {
	justify-content: space-between;
}
</style>
